<template>
	<view class="container">
		<!-- 刷新按钮 -->
		<view style="bottom: 100rpx;right: 50rpx;height: 100rpx;width: 100rpx;" class="fixed-bottom-right bg-warning rounded-circle text-center shadow-lg"
		 v-if="isShowRefresh">
			<label style="line-height: 100rpx;" :class="'text-info glyphicon glyphicon-refresh fa-2x ' + refreshClasses" @click="refresh();"></label>
		</view>
		<!-- 数据信息显示 -->
		<view class="fixed-bottom-right" style="bottom:50rpx;right: 10rpx;">
			<view v-if="total > 0" class="text-info">数据共<label v-text="total"></label>条，第<label v-text="current"></label>页，共<label
				 v-text="pages"></label>页</view>
			<view v-else class="text-danger">找不到匹配的数据</view>
		</view>
		<!-- 搜索 -->
		<view class="p-1">
			<u-search placeholder="请输入关键字回车搜索" v-model="keyword" :show-action="false" @search="search" @change="clear"
			 input-align="center"></u-search>
		</view>
		<!-- 列表 -->
		<view class="mt-1">
			<view class="mb-2" v-for="(user,index) in users" :key="user.id">
				<u-swipe-action :show="user.show" :options="options" :index="index" @open="open(index);" @click="click">
					<view class="card">
						<view class="card-header bg-light">
							<label v-text="user.name"></label>
							<label class="pull-right">{{user.createTime | dateF}}</label>
						</view>
						<view class="card-body">
							<view class="h5 card-title">{{user.moduleName}} / {{user.functionName}} / {{user.actionName}}</view>
							<view class="card-text">
								<text :class="user.icon + ' fa-3x'"></text>
							</view>
							<!-- <button href="#" class="btn btn-primary">详情</button> -->
						</view>
					</view>
				</u-swipe-action>
			</view>
		</view>
		<u-empty mode="data" v-if="pages < 1"></u-empty>
		<u-loadmore :status="(current <= pages && isRequest) ? 'loading' : (current < pages && !isRequest) ? 'loadmore' : 'nomore'"
		 @loadmore="loadData(2);" :load-text="loadText"></u-loadmore>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				page: 1,
				pageSize: 3,
				current: 0,
				pages: 0,
				users: [],
				keyword: '',
				isRequest: false,
				total: 0,
				refreshClasses: '',
				isShowRefresh: false,
				scrollTop: 0,
				loadText: {
					loadmore: '点击加载更多',
					loading: '努力加载中',
					nomore: '我是有底线的'
				},
				options: [{
					text: '测试1',
					style: {
						backgroundColor: '#a9b84c'
					}
				}, {
					text: '测试2',
					style: {
						backgroundColor: '#b477b0'
					}
				}]
			}
		},
		filters: {
			dateF(str) {
				if (str.length == 19) {
					return str.substr(0, 10);
				}
			}
		},
		methods: {
			/**
			 * 加载数据，
			 * type：0 默认加载、1:下拉刷新或关键字搜索、2:上滑加载更多
			 */
			loadData(type = 0) {
				if (this.isRequest) {
					return false; //正在请求，则返回
				}
				if (type === 1) {
					this.refreshClasses = 'fa-spin-1 text-danger';
					this.page = 1;
				}
				if (type === 2) {
					if (this.current >= this.pages) {
						return false;
					}
					this.page++;
				}
				this.isRequest = true;
				uni.showNavigationBarLoading();
				this.$request.ajax({
					url: this.$api.menusDataUrl,
					method: 'GET',
					data: {
						page: this.page,
						pageSize: this.pageSize,
						keyword: this.keyword
					},
					isShowLoad: false,
					success: (res) => {
						console.log(res.data)
						if (type === 1) {
							this.users = [];
						}
						res.data.records.map(r => r.show = false);
						this.users = this.users.concat(res.data.records);
						this.current = res.data.current;
						this.pages = res.data.pages;
						this.total = res.data.total;
					},
					complete: () => {
						this.isRequest = false;
						uni.hideNavigationBarLoading();
						if (type === 1) {
							this.refreshClasses = '';
							uni.stopPullDownRefresh();
						}
					}
				});
			},
			refresh() {
				if (this.isRequest) {
					return false; //如果正在请求中，则返回
				}
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				})
				uni.startPullDownRefresh();
				this.loadData(1);
			},
			click(index, index1) {
				uni.showModal({
					showCancel: false,
					title: '菜单ID',
					content: (index1 === 0 ? '测试1' : index1 === 1 ? '测试2' : '未知') + '--【' + this.users[index].name + '】',
					success: () => {
						this.users[index].show = false;
					}
				})
			},
			search(res) {
				this.loadData(1);
			},
			clear() {
				if (this.$u.test.empty(this.keyword)) {
					this.loadData(1);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				for (var i = 0; i < this.users.length; i++) {
					this.users[i].show = false;
				}
				this.users[index].show = true;
			}
		},
		onLoad() {},
		mounted() {
			this.loadData();
		},
		onPullDownRefresh() {
			this.loadData(1);
		},
		onReachBottom() {
			this.loadData(2);
		},
		onPageScroll(e) {
			if (e.scrollTop > this.scrollTop) {
				this.isShowRefresh = false
			} else {
				this.isShowRefresh = true
			}
			this.scrollTop = e.scrollTop

			// if(e.scrollTop === 0){
			// 	this.isShowRefresh = false
			// }
		},
	}
</script>

<style>
</style>
